<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="_header_include::frag(~{::title},~{::style},~{})">
	<title>后台管理系统</title>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/element-ui.css">
    <link rel="stylesheet" href="css/base.css">
    <style>
        .dialogForm .el-form-item{margin-bottom: 5px;}
    </style>
</head>
<body>
<div id="searchNewPhone" class="searchNewPhone mainPadding" style="display: none;">
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>资源管理</el-breadcrumb-item>
        <el-breadcrumb-item>新建号码查询</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="mainSearchBg">
        <div class="mainSearchFormBox">
                <el-form :inline="true" class="demo-form-inline mainSearchForm" :model="form" ref="form">
                    <el-form-item label="资源创建时间:" :label-width="formLabelWidth">
                    <el-date-picker
                        v-model="form.startTime"
                        type="datetime"
                        placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="—" class="widthauto">
                    <el-date-picker
                        v-model="form.endTime"
                        type="datetime"
                        placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="手机号:">
                    <el-input v-model="form.phone" placeholder="手机号"></el-input>
                </el-form-item>
                <el-form-item label="资源ID:">
                    <el-input v-model="form.clueId" placeholder="资源ID"></el-input>
                </el-form-item>
                <el-form-item label="电销分公司:">
                    <el-select v-model="form.teleCompanyId" placeholder="电销分公司" clearable filterable>
                        <el-option
                                v-for="item in dxBusinessList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="手机号创建时间:" :label-width="formLabelWidth">
                    <el-date-picker
                        v-model="form.phoneCreateStartTime"
                        type="datetime"
                        placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="—" class="widthauto">
                    <el-date-picker
                        v-model="form.phoneCreateEndTime"
                        type="datetime"
                        placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="电销组:" prop="teleGroupId">
                    <el-select v-model="form.teleGroupId" clearable @change="getSaleList" placeholder="电销组" filterable>
                      <el-option
                          v-for="item in teleGorupOptions"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电销顾问:" prop="teleSaleId">
                    <el-select v-model="form.teleSaleId" clearable placeholder="电销顾问" filterable>
                      <el-option
                          v-for="item in teleSaleOptions"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <div class="mainSearchBtnBox">
                    <el-button icon="el-icon-search" type="primary" @click="searchTable('form')"  class="searchBtn">搜索</el-button>
                    <!-- <el-button type="info" class="searchBtn">取消</el-button>  -->
                    <!-- <span style="color: #5c6be8;cursor: pointer;margin:0 10px;" @click="toogleClick"><span v-if="isShow">收起</span><span v-else>展开更多</span><i :class="{'greycolor paddingL6 el-icon-arrow-up':isShow,'greycolor paddingL6 el-icon-arrow-down':!isShow}"></i></span> -->
                </div>
            </el-form>
        </div>
        <el-row>
            <el-table
                ref="multipleTable"
                tooltip-effect="dark"
                style="width: 100%"
                border
                :data="dataTable"
                @row-dblclick="customerEidt"
                @row-click="clickRow"
                @selection-change="handleSelectionChange"
                >
                <el-table-column align="center" type="selection" width="55"></el-table-column>
                <el-table-column align="center" type="index" label="序号"  width="55"></el-table-column>
                <el-table-column align="center" prop="clueId" label="资源ID" width="230">
                    <template slot-scope="scope">
                        <el-button @click="customerEidt(scope.row)" type="text" size="small">
                            {{scope.row.clueId}}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="createTime" label="资源创建时间" :formatter="dateFormat" width="130"></el-table-column>
                <el-table-column align="center" prop="phone" label="手机号1"  width="100"></el-table-column>
                <el-table-column align="center" prop="phoneCreateTime" label="手机号1创建时间" :formatter="dateFormat" width="130"></el-table-column>
                <el-table-column align="center" prop="phoneCreateUserName" label="手机号1创建人"  width="130"></el-table-column>
                <el-table-column align="center" prop="phone2" label="手机号2"  width="100"></el-table-column>
                <el-table-column align="center" prop="phone2CreateTime" label="手机号2创建时间" :formatter="dateFormat" width="130"></el-table-column>
                <el-table-column align="center" prop="phone2CreateUserName" label="手机号2创建人"  width="130"></el-table-column>
                <el-table-column align="center" prop="phone3" label="手机号3"  width="100"></el-table-column>
                <el-table-column align="center" prop="phone3CreateTime" label="手机号3创建时间" :formatter="dateFormat" width="130"></el-table-column>
                <el-table-column align="center" prop="phone3CreateUserName" label="手机号3创建人"  width="130"></el-table-column>
                <!-- <el-table-column align="center" prop="phone4" label="手机号4"  width="100"></el-table-column>
                <el-table-column align="center" prop="phone4CreateTime" label="手机号4创建时间" :formatter="dateFormat" width="130"></el-table-column>
                <el-table-column align="center" prop="phone4CreateUserName" label="手机号4创建人"  width="130"></el-table-column>
                <el-table-column align="center" prop="phone5" label="手机号5"  width="100"></el-table-column>
                <el-table-column align="center" prop="phone5CreateTime" label="手机号4创建时间" :formatter="dateFormat" width="130"></el-table-column>
                <el-table-column align="center" prop="phone5CreateUserName" label="手机号5创建人"  width="130"></el-table-column> -->
                <el-table-column align="center" prop="teleCompanyName" label="电销分公司"  width="100"></el-table-column>
                <el-table-column align="center" prop="teleGorupName" label="电销组"  width="100"></el-table-column>
                <el-table-column align="center" prop="teleDirectorName" label="电销总监"  width="100"></el-table-column>
                <el-table-column align="center" prop="teleSaleName" label="电销顾问"  width="100"></el-table-column>
            </el-table>
            <table-pagination v-if="paginationShow" :pager="pager" @change="searchTable"></table-pagination>
        </el-row>
    </div>
    <!-- dialog -->
</div>
</body>
<!-- import Vue before Element -->
<div th:include="_footer_include :: #jsLib"></div>

<!-- import common js-->
<script th:inline="javascript">
    var saleGroupList=[[${teleGroupList}]];//电销组
    var ocmVM = new Vue({
        el: '#searchNewPhone',
        data: function() {
            return {
                paginationShow: false,
                isShow:false,
                dialogFormVisible: false,
                multipleSelection: [],//选择行
                teleGorupOptions:saleGroupList,//电销组
                teleSaleOptions:[],//电销顾问
                dxBusinessList:[],//
                pager:{
	                total: 0,
	                currentPage: 1,
	                pageSize: 20,
	            },
                form: {
                	phone:'',
                    clueId:'',
                    startTime:'',
                    endTime:'',
                    teleCompanyId:'',
                    teleGroupId:'',
                    teleSaleId:'',
                    phoneCreateStartTime:'',
                    phoneCreateEndTime:'',
                },
                formLabelWidth: '100px',
                dataTable: [],
                dialogTableData:[],
                statusOptions: [{
                    value: 1,
                    name: '未重新推送'
                }, {
                    value: 2,
                    name: '重新推送成功'
                }, {
                    value: 3,
                    name: '重新推送失败'
                }],
                storeForm: {
                	phone:'',
                    clueId:'',
                    startTime:'',
                    endTime:'',
                    teleCompanyId:'',
                    teleGroupId:'',
                    teleSaleId:'',
                    phoneCreateStartTime:'',
                    phoneCreateEndTime:'',
                },
                storeId: '',
                scrollTop: 0,

            }
        },
        methods: {
            getBusAndTel(){
                // var param ={};
                // axios.post('/financing/balanceaccount/getBusAndTel', param)
                // .then(function (response) {
                //       var result =  response.data;
                //       ocmVM.dxBusinessList = result.teleCompanyList;
                // })
                // .catch(function (error) {
                //      console.log(error);
                // });
                var param={};
                param.orgType="8";
                axios.post('/organization/organization/queryOrgByType',param).then(function (response) {
                    //    console.log(response);                    
                    ocmVM.dxBusinessList = response.data.data;
                }).catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    // always executed
                });
            },
            //根据电销组查询电销总监
            getSaleList() {
              var param ={};
                if (null == this.form.teleGroupId || "" == this.form.teleGroupId) {
                    ocmVM.teleSaleOptions = [];
                    return;
                }
                param.orgId = this.form.teleGroupId;
                console.info(param);
              axios.post('/business/busAllocation/getSaleList', param)
              .then(function (response) {
                    var result =  response.data;
                    console.info(result);
                    var table=result.data;
                    ocmVM.teleSaleOptions= table;
              })
              .catch(function (error) {
                   console.log(error);
              });
            },
            customerEidt(row){
                var clueId=row.clueId;
                //客户维护界面
                this.setSessionStore("storeForm", this.storeForm);
                var otherVal = {
                  "currentPage": this.pager.currentPage,
                  "clueId": clueId,
                  "scrollTop": this.$el.querySelector('.el-table__body-wrapper').scrollTop
                }
                this.setSessionStore("searchNewPhoneOtherVal", otherVal);
                // window.location.href="/tele/clueMyCustomerInfo/customerEditInfo?clueId="+clueId;
                // /tele/clueMyCustomerInfo/customerInfoReadOnly?repeatFlag=1&clueId='+item.clueId+'
                window.location.href="/tele/clueMyCustomerInfo/customerInfoReadOnly?repeatFlag=1&telCreatePhoneAuditFlag=1&clueId="+clueId;
            },
            clickRow(row){
                this.$refs.multipleTable.toggleRowSelection(row)
            },
            handleSelectionChange(val) {//选择节点的事件
                // console.log(val)
                this.multipleSelection = val;
            },
            searchTable() {
            	var startTime=this.form.startTime;
                var endTime=this.form.endTime;
                if(endTime && startTime>endTime){
                    this.$message({
                        message: '结束时间不允许选择早于开始时间',
                        type: 'warning'
                    });
                    return;
                }
                var startTime1=this.form.phoneCreateStartTime;
                var endTime1=this.form.phoneCreateEndTime;
                if(endTime1 && startTime1>endTime1){
                    this.$message({
                        message: '结束时间不允许选择早于开始时间',
                        type: 'warning'
                    });
                    return;
                }
                var param =this.form;
                param.startTime = startTime;
                param.endTime = endTime;
                param.phoneCreateStartTime = startTime1;
                param.phoneCreateEndTime = endTime1;
                param.pageSize = this.pager.pageSize;
                param.pageNum = this.pager.currentPage;
                param.phone = this.form.phone;
                param.clueId = this.form.clueId;
                param.teleCompanyId = this.form.teleCompanyId;
                param.teleGroupId = this.form.teleGroupId;
                param.teleSaleId = this.form.teleSaleId;

                console.info(param);
                axios.post('/telCreatePhoneLog/queryPageList', param)
                .then(function (response) {
                        var result =  response.data;
                        if (response.data.code == 0) {
                                console.info(result);
                            var table=result.data;
                            ocmVM.dataTable= table.data;
                            ocmVM.pager.total =  table.total;
                            ocmVM.pager.currentPage = table.currentPage;
                        } else {
                            ocmVM.$message.error(response.data.msg);
                        }

                        // 取出存储的id
                        if(!ocmVM.paginationShow){
                            if(ocmVM.storeId){
                                ocmVM.$nextTick(function(){
                                    var storage = [];
                                    ocmVM.dataTable.forEach(function(item, index){
                                        if(item.id === ocmVM.storeId ){
                                            storage.push(ocmVM.dataTable[index]);
                                        }
                                    })
                                    ocmVM.toggleSelection(storage);
                                    ocmVM.$el.querySelector('.el-table__body-wrapper').scrollTop = ocmVM.scrollTop;
                                })
                            }
                        }else{
                            ocmVM.removeSessionStore ("searchNewPhoneStoreForm");
                            ocmVM.removeSessionStore ("searchNewPhoneOtherVal");
                        }
                        ocmVM.paginationShow = true;
                        ocmVM.storeForm = ocmVM.form;
                })
                .catch(function (error) {
                     console.log(error);
                });

            },
            toggleSelection(rows) { // table select 默认选中fn
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row,true);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            //日期数据格式化方法
            dateFormat( row, column, cellValue, index) {
              if (cellValue == undefined) {
                 return "";
              }
              return moment(cellValue).format("YYYY-MM-DD HH:mm:ss");
            },
            toogleClick(){
                if(this.isShow){
                  this.isShow=false
                }else{
                  this.isShow=true
                }
            },
            setSessionStore (name, content) {
                if (!name) return
                if (typeof content !== 'string') {
                content = JSON.stringify(content)
                }
                window.sessionStorage.setItem(name, content)
            },
            getSessionStore (name) {
                if (!name) return;
                var content = window.sessionStorage.getItem(name);
                if (typeof content == 'string') {
                    content = JSON.parse(content)
                }
                return content;
            },
            removeSessionStore (name) {
                if (!name) return
                return window.sessionStorage.removeItem(name)
            },
        },
        created(){
            // 进入页面判断有是否有存储值
            if(!this.paginationShow){
                var storeVal = this.getSessionStore("searchNewPhoneStoreForm");
                var otherVal = this.getSessionStore("searchNewPhoneOtherVal");
                if(storeVal && otherVal){
                    this.form = storeVal;
                    this.$set(this.pager,"currentPage",otherVal.currentPage);
                    this.storeId = otherVal.clueId;
                    this.scrollTop = otherVal.scrollTop;
                }
            };
            var localVal=localStorage.getItem('allChangePageSize')?parseInt(localStorage.getItem('allChangePageSize')):'';
			if(localVal){this.pager.pageSize = localVal;}
            // console.info("create method");
            this.searchTable();
            this.getBusAndTel();
        },
        mounted(){
            document.getElementById('searchNewPhone').style.display = 'block';
        }
    })
</script>
</html>